<template>
    <div-row :obj="obj" class="content-wrapper text-picture">
        <el-row :gutter="obj.gutter">
            <el-col :span="24/obj.columns" v-for="(item,index) in obj.imgTextBox" :key="index">
                <el-card class="mt10">
                    <div @click="goClick(item.httpUrl)" class="img image" :class="obj.animateImg? 'wow '+obj.animateImg : ''">
                        <img :src="item.imgUrl" :style="{height:obj.imgHeight+'px'}">
                    </div>
                    <div class="text-box">
                        <h2 class="text-title" :class="obj.animateTitle? 'wow '+obj.animateTitle : ''" v-html="item.title"/>
                        <div class="bottom clearfix">
                            <p class="text-desc" :class="obj.animateText? 'wow '+obj.animateText : ''" v-html="item.desc"/>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div-row>
</template>
<script>
import animate from '@/mixins/animate'
import { fmRequest } from '@/api/api'
export default {
    name: 'ThreeColumns',
    mixins: [animate],
    watch: {
        'obj.version': {
            handler(newValue, oldValue) {
            //    this.$set(this.obj,'title',this.obj[this.obj.titleKey])
                this.$nextTick(() => { // 在dom渲染完后,再执行动画
                    if (this.obj.imgTextBoxCopy) {
                        this.obj.imgTextBox = this.obj.imgTextBoxCopy
                        this.obj.imgTextBoxCopy = null
                    }
                })
            },
            deep: true
        }
    },
    methods: {
        initDate() {
            fmRequest(this.obj.url, this.obj.method, this.obj.queryType, JSON.parse(this.obj.params))
                .then(res => {
                    console.log(res)
                    var data = res.rows
                    data.forEach(element => {
                        element.title = element[this.obj.titleKey]
                        element.imgUrl = element[this.obj.imageKey]
                        element.desc = element[this.obj.descKey]
                    })
                    this.$set(this.obj, 'imgTextBoxCopy', data)
                    // this.$set(this.obj, 'version', this.obj.version++)
                }).catch(err => {
                    console.log(err)
                })
        }
    }

}
</script>
